<!--模板-->
<template>
  <div class="goods">
    <!-- 1.卡片 -->
    <el-card>
      <!-- 2.导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/goods' }"
          >商品列表</el-breadcrumb-item
        >
        <el-breadcrumb-item>购物车</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 3.表格 -->
      <el-table
        :data="goods"
        border
        style="width:100%"
        :header-cell-style="headeCellStyle"
        highlight-current-row
      >
        <el-table-column
          type="index"
          width="50"
          align="center"
          label="序号"
        ></el-table-column>
        <el-table-column label="图片" width="100" align="center">
          <template v-slot="scope">
            <img :src="scope.row.imgUrl" alt="" width="100%" />
          </template>
        </el-table-column>
        <el-table-column
          label="商品名"
          width="150"
          property="name"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="商品描述"
          width="150"
          property="desc"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="商品重量"
          property="weight"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          label="商品价格"
          property="price"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          label="添加数量"
          property="num"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <!-- v-slot：作用域插槽 -->
          <template v-slot="scope">
            <!-- scope.row === 当前行显示的商品对象 -->
            <el-button
              type="primary"
              size="mini"
              @click="moveFromcarts(scope.row)"
              >删除</el-button
            >
            <el-button type="warning" size="mini">收藏</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
// import component from '@/component/*.vue'
export default {
  name: '',
  data() {
    return {
      goods: [],
      headeCellStyle: {
        backgroundColor: '#01204F',
        color: '#fff',
        fontWeight: 'bold'
      }
    }
  },
  prop: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
    moveFromcarts(goods) {
      goods = JSON.parse(JSON.stringify(goods))
      this.$store.commit('cartMove', goods)
      this.getCarts()
      this.$message.success('删除成功')
    },
    getCarts() {
      let goods = JSON.parse(JSON.stringify(this.$store.state.carts))
      this.goods = goods
    }
  },
  created() {
    this.getCarts()
  },
  mounted() {}
}
</script>

<style lang="less" scoped>
// @import url(); 引入公共css
</style>
